<template>
  <div class="container">
    <div class="row">
      <div class="col-12">
        <EngineerSelect v-model="selectedEngineer" class="w-200px ms-2" />
        <span class="fs-6 ms-2">当前选择工程师: {{ selectedEngineer?.label || '全员' }}</span>
        <div class="d-flex align-items-stretch">
          <span
            class="h2 d-flex flex-column justify-content-center align-items-center"
            style="writing-mode: vertical-rl; text-orientation: mixed; min-width: 48px"
          >
            一天24小时提交统计
          </span>
          <div class="flex-grow-1">
            <HourlyCommitChart :engineer-id="selectedEngineer?.value" />
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="d-flex align-items-stretch">
          <span
            class="h2 d-flex flex-column justify-content-center align-items-center"
            style="writing-mode: vertical-rl; text-orientation: mixed; min-width: 48px"
          >
            一周7天提交统计
          </span>
          <div class="flex-grow-1">
            <WeeklyCommitChart :engineer-id="selectedEngineer?.value" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import EngineerSelect from '@/components/common/EngineerSelect.vue';
import HourlyCommitChart from '@/components/analysis/HourlyCommitChart.vue';
import WeeklyCommitChart from '@/components/analysis/WeeklyCommitChart.vue';

const selectedEngineer = ref<{ value: number; label: string } | null>(null);
</script>
